<template>
  <el-aside width="200px">
    <div style="display: flex">
      <el-affix :offset="0">
        <div style="display: flex">
          <el-image :src="url" :fit="fit" />
          <div style="margin-top: 30px">
            <span class="image_span">后台管理</span>
          </div>
        </div>
      </el-affix>
    </div>

    <el-menu
      text-color="#ffff"
      active-text-color="#ffd04b"
      background-color="rgb(48, 65, 86)"
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      popper-effect="light"
      :router="true"
    >
      <div>
        <el-menu-item index="/index">
          <el-icon><Odometer /></el-icon>
          <span>首页</span>
        </el-menu-item>
      </div>
      <div>
        <el-menu-item index="/user">
          <el-icon><UserFilled /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
      </div>
      <div>
        <el-menu-item index="/department">
          <el-icon><HelpFilled /></el-icon>
          <span>部门管理</span>
        </el-menu-item>
      </div>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/notice">
            <el-icon><BellFilled /></el-icon>
            公告管理
          </el-menu-item>
          <el-menu-item index="/evaluation">
            <el-icon><Comment /></el-icon>
            评价管理
          </el-menu-item>
          <el-menu-item index="/feedBack">
            <el-icon><QuestionFilled /></el-icon>
            反馈管理
          </el-menu-item>
          <el-menu-item index="/log">
            <el-icon><List /></el-icon>
            日志管理
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>预约管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/reservation"
            ><el-icon><ElemeFilled /></el-icon>会议管理</el-menu-item
          >
          <el-menu-item index="/message"
            ><el-icon><BellFilled /></el-icon>通知管理</el-menu-item
          >
          <el-menu-item index="/sign"
            ><el-icon><SuccessFilled /></el-icon>签到管理</el-menu-item
          >
          <el-menu-item index="/room"
            ><el-icon><ChromeFilled /></el-icon>会议室管理</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import {
  Document,
  Setting,
  UserFilled,
  List,
  Odometer,
  ElemeFilled,
  ChromeFilled,
  Comment,
  QuestionFilled,
  BellFilled,
  HelpFilled,
  SuccessFilled,
} from "@element-plus/icons-vue";
const url = "https://pic.imgdb.cn/item/654210cec458853aef0e9d59.png";
</script>

<style scoped>
.el-menu {
  margin-top: 20px;
}

/* 图标 */
.el-image {
  width: 50px;
  height: 50px;
  margin-left: 35px;
  margin-top: 15px;
  border-radius: 10%;
}

.image_span {
  color: aliceblue;
  margin-left: 8px;
  font-weight: bold;
}

/* 首页 */
.first_span {
  margin-left: 25px;
  color: aliceblue;
}
</style>